<template>
  <div>
    <Card class="m-2" title="表单表格-分离" :headStyle="{ fontSize: '20px' }">
      <ul style='list-style-type: disc;margin-left: 20px;'>
        <li>2111</li>
        <li>
          同步部门下的用户到本地
          <a-tooltip title='同步用户与部门文档'>
            <a-icon type="question-circle" class="sync-text" />
          </a-tooltip>
        </li>
      </ul>
    </Card>
    <div class="m-2 p-2 bg-white">
      <BasicForm :labelWidth="100" @register="registerForm" :actionColOptions="{ span: 8 }" :baseColProps="{ span: 3 }" @submit="handleSubmit" />
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable" title="基础示例">
      <template #tableTop>
        <div>
          <a-alert banner message="该操作不会影响页面标题，仅修改Tab标题" />
        </div>
      </template>

      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增</a-button>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
        <a-button type="primary" @click="handleTest"> 显示测试按钮 </a-button>
        <a-button type="primary" v-if="startEdit" :loading="loading"> 加载中 </a-button>
        <a-button type="default" v-if="startEdit"> 默认 </a-button>
        <a-button type="default" v-if="startEdit" danger> 危险 </a-button>
        <a-button color="success" v-if="startEdit"> 成功 </a-button>
        <a-button color="warning" v-if="startEdit"> 警告 </a-button>
        <a-button color="error" v-if="startEdit"> 错误 </a-button>
        <a-button color="error" v-if="startEdit" class="ml-6" disabled> 禁用 </a-button>
        <a-button type="link" v-if="startEdit"> link </a-button>
        <a-button type="link" v-if="startEdit" disabled> 这个按钮可以作为提示信息等 </a-button>
      </template>
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #toolbar>
        <a-button type="default" danger> 危险 </a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts" name="emp-est01" setup>
import { reactive, ref, onMounted } from 'vue';
import { Card, Row, Col, Spin } from 'ant-design-vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { columns, searchFormSchemaTest } from './data';
import { list, deleteOne, getImportUrl, getExportUrl } from './api';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

const queryParam = reactive<any>({});
import { FormSchema, useForm, BasicForm } from '/@/components/Form';
import { mapTableTotalSummary } from '/@/utils/common/compUtils';

//注册table数据
const { tableContext, onExportXls, onImportXls } = useListPage({
  tableProps: {
    title: 'test01表',
    api: list,
    columns,
    canResize: false,
    showIndexColumn: true,        //显示行号
    showActionColumn: false,      //显示操作列
    // formConfig: {
    //   //labelWidth: 120,
    //   schemas: searchFormSchemaTest,
    //   autoSubmitOnEnter: true,
    //   showAdvancedButton: true,
    //   fieldMapToNumber: [],
    //   fieldMapToTime: [],
    // },
    actionColumn: {
      width: 120,
      fixed: 'right',
    },
    immediate: true,   //不自动请求
    showSummary: false,  // 显示底部合计
    striped: true,      //斑马纹
    // summaryFunc: onSummary,// 底部合计计算方法
    beforeFetch: (params) => {
      let formParams = getFieldsValue();
      return Object.assign(params, queryParam,formParams);
    },
  },
  exportConfig: {
    name: 'test01表',
    url: getExportUrl,
    params: queryParam,
  },
  importConfig: {
    url: getImportUrl,
    success: handleSuccess,
  },
});

const [registerTable, { reload, getForm }, { selectedRowKeys }] = tableContext;

const [registerForm, { setProps, updateSchema, setFieldsValue, getFieldsValue }] = useForm({
  labelWidth: 120,
  schemas: searchFormSchemaTest,
  actionColOptions: {
    span: 6,
  },
  compact: true,
  showResetButton: true,
  showSubmitButton: true,
  showAdvancedButton: false,     //高级按钮，重置后面的收起、展开
  disabled: false,
});

const startEdit = ref<boolean>(true);
const loading = ref(true);
const orgName = ref('');
setTimeout(() => {
  loading.value = false;
}, 1000);

// 初始化
onMounted(async () => {
  await initTeamSelect();
});

/**
 * 新增事件
 */
function handleAdd() {
}

/**
 * 测试事件
 */
function handleTest() {
  $message.info('后面为测试按钮');
  startEdit.value = true;
}

/**
 * 初始化下拉框
 */
 async function initTeamSelect() {
  updateSchema([
    {
      field: 'orgCode',
      componentProps: {
        onChange: (e, i) => {
          console.log('切换了：',e);
          orgName.value = i?.label;
          handleSuccess();
        },
        // atfer request callback
        onOptionsChange: (options) => {
          console.log('get options', options.length, options);
        },
      },
    },
  ]);
}

/**
 * 编辑事件
 */
function handleEdit(record: Recordable) {
  $message.info('编辑....'+record.id);
}
/**
 * 删除事件
 */
async function handleDelete(record) {
  await deleteOne({ id: record.id }, handleSuccess);
}
/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}
/**
 * 提交事件
 */
function handleSubmit() {
  let formData = getFieldsValue();
  let params = Object.assign({}, formData);
  console.log('表单数据', params);
  reload({ searchInfo: params });
}

/**
 * 底部合计
 */
function onSummary(tableData: Recordable[]) {
  // 可用工具方法自动计算合计
  const totals = mapTableTotalSummary(tableData, ['displayOrder']);
  return [
    totals,
    {
      // _row: '平均',
      _index: '平均',
      displayOrder: (totals.displayOrder / tableData.length).toFixed(2),// 计算平均值
    },
  ];
}
/**
 * 表格操作栏
 */
function getTableAction(record) {
  return [
    {
      label: '编辑',
      icon: 'clarity:note-edit-line',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '删除',
      icon: 'ant-design:delete-outlined',
      color: 'error',
      popConfirm: {
        title: '是否确认删除',
        placement: 'left',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
  width: 100%;
}

.m-4 {
  background-color: #fff;
  padding-top: 20px;
  margin: 0px;
}
</style>